<template>
  <a-row align="center" :wrap="false">
    <a-col flex="auto">
      <div class="menu">
        <a-menu
          mode="horizontal"
          :selected-keys="selectKeys"
          @menu-item-click="doMenuClick"
        >
          <a-menu-item
            key="logo"
            :style="{ padding: 0, cursor: 'pointer' }"
            disabled
          >
            <div class="title-bar">
              <img class="logo" src="../assets/logo.png" alt="logo" />
              <div class="title">feiOJ</div>
            </div>
          </a-menu-item>
          <a-menu-item v-for="itme in visibleRoutes" :key="itme.path"
            >{{ itme.name }}
          </a-menu-item>
        </a-menu>
      </div>
    </a-col>
    <a-col flex="64px">
      <a-dropdown trigger="hover" @select="handleDropdown">
        <a-avatar
          :style="{ backgroundColor: '#14a9f8', fontSize: '14px' }"
          :image-url="currentUser.avator"
        >
          {{ currentUser.username }}
        </a-avatar>
        <template #content>
          <a-doption value="userInfo">个人信息</a-doption>
          <a-doption value="logout">退出登录</a-doption>
        </template>
      </a-dropdown>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import routes from "@/router/routes";
import { useRouter } from "vue-router";
import { ref } from "vue";
import checkAccess from "@/access/checkAccess";
import { useUserStore } from "@/stores";
import message from "@arco-design/web-vue/es/message";

const router = useRouter();
const selectKeys = ref(["/home"]);
const userStore = useUserStore();
const currentUser = userStore.userInfo;
const flatMapRoutes = routes.flatMap((item) => {
  return item.children ? item.children : item;
});
const visibleRoutes = flatMapRoutes.filter((item) => {
  //根据是否展示隐藏菜单
  if (item?.meta?.hideInMenu) {
    return false;
  }
  //根据权限隐藏菜单
  return checkAccess(currentUser, item?.meta?.access);
});

const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};

router.afterEach((to, from) => {
  console.log("to=>" + to.path + ",from=>" + from.path + "");
  selectKeys.value = [to.path];
});

const handleDropdown = (val) => {
  if (val === "userInfo") {
    message.warning("正在开发中...");
  } else if (val === "logout") {
    userStore.removeLoginUser();
    message.success("退出成功");
    router.push("/login");
  }
};
</script>

<style scoped>
.menu .title-bar {
  display: flex;
  align-items: center;
}

.menu .logo {
  height: 42px;
}

.menu .title-bar .title {
  font-size: 24px; /* 根据需要调整字体大小 */
  color: #333; /* 根据需要调整字体颜色 */
  margin-left: 14px;
}
</style>
